<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页面</title>
    <script src="../js/axios.min.js"></script>
    <link
    rel="stylesheet"
    href="http://at.alicdn.com/t/font_3210907_jojo5s4bk9.css"
  />
    <link rel="stylesheet" href="../css/item.css">
</head>
<body>
    <div class="head">
        <header>
          <div class="head1">
            <a href=""
              ><span class="iconfont icon-chazhaodingwei" id="s1"
                >查找门店</span
              ></a
            >
            <a href=""
              ><span class="iconfont icon-lianxiwomen" id="s2">联系我们</span></a
            >
          </div>
          <h3>D A N I E L W E L L I N G T O N</h3>
          <div class="head2">
            <button id="clickLogin">
              <span class="iconfont icon-yonghu">DW会员俱乐部</span>
            </button>
            <div class="head21">
              <p>已经是DW的会员？</p>
              <button onclick="window.location.href='login.html'">登录</button>
              <p>注册会员享受更多权益</p>
              <button onclick="window.location.href='register.html'">注册</button>
            </div>
          </div>
        </header>
      </div>
      <div class="navList">
        <ul>
          <li class="navList1">
            全新上市
            <div class="navList11">
              <ul>
                <li>复古方形腕表系列</li>
                <li>珠光贝母腕表系列</li>
                <li>DW-SWITCH系列</li>
                <li>墨镜</li>
              </ul>
            </div>
          </li>
          <li class="navList2">智能手表装饰壳</li>
          <li class="navList3">
            腕表
            <div class="navList33">
              <ul>
                <li>所有腕表</li>
                <li>男士腕表</li>
                <li>女士腕表</li>
                <li>QUADRO系列</li>
                <li>PETITE系列</li>
                <li>CLASSIC系列</li>
                <li>ICONIC系列</li>
                <li>金色手表</li>
                <li>银色手表</li>
                <li>玫瑰金色手表</li>
              </ul>
            </div>
          </li>
          <li class="navList4">
            配饰
            <div class="navList44">
              <ul>
                <li>所有配饰</li>
                <li>戒指</li>
                <li>手镯/手链</li>
                <li>耳饰</li>
                <li>项链</li>
                <li>墨镜</li>
              </ul>
            </div>
          </li>
          <li class="navList5">
            系列
            <div class="navList55">
              <ul>
                <li>所有系列</li>
                <li>QUADRO系列</li>
                <li>PETITE系列</li>
                <li>CLASSIC系列</li>
                <li>ICONIC系列</li>
                <li>ELAN系列</li>
                <li>QUADRO系列</li>
                <li>PETITE系列</li>
                <li>CLASSIC系列</li>
                <li>ICONIC系列</li>
                <li>ELAN系列</li>
              </ul>
            </div>
          </li>
          <li class="navList6">
            礼盒套装
            <div class="navList66">
              <ul>
                <li>礼盒套装</li>
                <li>与她宠爱</li>
                <li>赠他惊喜</li>
              </ul>
            </div>
          </li>
          <li class="navList7">
            表带
            <div class="navList77">
              <ul>
                <li>所有表带</li>
                <li>PETITE表带</li>
                <li>CLASSIC表带</li>
                <li>CLASSIC表带</li>
              </ul>
            </div>
          </li>
          <li class="navList8">
            穿搭灵感
            <div class="navList88">
              <ul>
                <li>女士精选</li>
                <li>男士精选</li>
                <li>明星风尚</li>
              </ul>
            </div>
          </li>
          <li class="navList9">
            探索DW
            <div class="navList99">
              <ul>
                <li>品牌故事</li>
                <li>联系我们</li>
                <li>常见问题</li>
              </ul>
            </div>
          </li>
        </ul>
        <a href=""><span class="iconfont icon-gouwuche1"></span></a>
      </div>
    <div class="itemBox"></div>
    <script>
        //详情页通过列表点击进入，通过pid传入具体数据，根据pid展示详情
        //1-获取商品pid
        //因为pid现在被写在url里面，我们可以用url里面的serach方法，就可以获取商品pid
        //?pid=727458
        console.log(location.search);
        //我们只想要后面的数字
        //URLSearchParams这个构造函数可以把我们得到的？pid=727458转换成一个对象
        let obj = new URLSearchParams(location.search);
        // console.log(obj);
        //get方法获得对应的参数
        let pid = obj.get('pid');
        console.log(pid);
        //2-根据商品 id 获取商品详情接口
        //  接口地址：http://jx.xuzhixiang.top/ap/api/detail.php
        // 接口请求方式：get
        // 接口参数：
        // id  商品的id
        // 使用方式
        // 获取id为1的商品的详情
        // http://jx.xuzhixiang.top/ap/api/detail.php?id=1
        // 服务器返回json数据
        let itemAPI = "http://jx.xuzhixiang.top/ap/api/detail.php"
        axios.get(itemAPI, {
            params: {
                id: pid
            }
        }).then(res => {
            //获取了一个商品详情的对象
            console.log(res.data.data);
            let itemObj = res.data.data;
            let str = ` 
       <img src="${itemObj.pimg}" alt="">
       <div class="itemSmallBox">
       <span>${itemObj.pname}&nbsp;&nbsp;${itemObj.pprice}</span>
       <hr>
       <p>${itemObj.pdesc}</p>
       <p>➕定制贺卡￥0</p>
       <input type="number" style="text-align:center;width:40px" min="1" value="1">
       <button onclick="alertShopCar(${itemObj.pid})">加入购物车→</button>
       <p class="textColor">■顺丰包邮</p>
       <p class="textColor">■免息分期</p>
       <p class="textColor">■正品保障</p>
       </div>
            
            `
            document.querySelector(".itemBox").innerHTML = str;
        })
        function alertShopCar(pid) {
        //添加商品到购物车接口
        //     接口地址：http://jx.xuzhixiang.top/ap/api/add-product.php
        //     接口请求方式：get
        //     接口参数：
        //     uid  用户id
        //     pid  商品id
        //     pnum  要添加的商品数量
        //     使用方式
        //     http://jx.xuzhixiang.top/ap/api/add-product.php?uid=1&pid=1&pnum=1
        //     服务器返回json数据
 

        //拿到各个参数，发起加入购物车的请求
        let alertShopCarAPI="http://jx.xuzhixiang.top/ap/api/add-product.php";
        let uid=localStorage.getItem("id");
        let ipt=document.querySelector("input");
        let pnum=ipt.value;
        axios.get(alertShopCarAPI,{params:{
            uid,
            pid,
            pnum,
        }}).then(res=>{
          alert(res.data.msg);
          location.href="shopCar.html"
            
        })

        }
    </script>
</body>

</html>